<template>
  <view class="page-view">
    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        {{villageName}}
        <view class="header-wrap">
          <van-tabs color="#fff" :active="active" @change="onChange">
            <van-tab title="基础信息">
              <view class="cardItem baseContent">
                <view v-for="base in baseInfoList" :key="base.prop" class="rowItem">
                  <view class="label">{{ base.label }}</view>
                  <view v-if="base.label !== '村庄航拍'" class="value">
                    {{ baseInfoData[base.prop] || '暂无数据' }}
                    <span v-if="baseInfoData[base.prop]">{{ base.unit }}</span>
                  </view>
                  <view v-else class="value">
                    <image v-for="pic in baseInfoData[base.prop] && baseInfoData[base.prop].split(',')" :key="pic"
                      :src="pic" class="villagePic" @click="previewPic(pic)"></image>
                  </view>
                </view>
              </view>
            </van-tab>
            <van-tab v-if="villageType == 2" title="终端总览" :name="1">
              <Terminal v-if="active === 1" :villageId="villageId" />
            </van-tab>
            <van-tab title="设备监测" :name="2">
              <Device v-if="active === 2" :villageId="villageId" :villageType="villageType" />
            </van-tab>
            <van-tab title="运维效能" :name="3">
              <YunWei v-if="active === 3" :villageId="villageId" />
            </van-tab>
          </van-tabs>
        </view>
      </u-sticky>
    </view>
  </view>
</template>

<script>
import Terminal from './components/terminal.vue'
import Device from './components/device.vue'
import YunWei from './components/yunwei.vue'

import { getVillageInfo } from '@/api/manage'
export default {
  components: { Terminal, Device, YunWei },
  data() {
    return {
      active: 0,
      villageName: '',
      // baseInfoList: [
      //   { label: '排水户', prop: 'farmersNum', unit:'户' },
      //   { label: '接入终端', prop: 'terminalNum', unit:'户' },
      //   { label: '终端名称', prop: 'terminalName' },
      //   { label: '管网长度', prop: 'pipLength', unit:'m' },
      //   { label: '运维企业', prop: 'enterpriseName' },
      //   { label: '村庄航拍', prop: 'aerialPhoto' },
      // ],
      // baseInfoList1: [
      //   { label: '排水户', prop: 'farmersNum', unit:'户' },
      //   { label: '管网长度', prop: 'pipLength', unit:'m' },
      //   { label: '运维企业', prop: 'enterpriseName' },
      //   { label: '村庄航拍', prop: 'aerialPhoto' },
      // ],
      baseInfoData: {
        paishuiHu: '',
        terminal: '',
        terminalName: '',
        pipLength: '',
        yunweiBusiness: '',
        villagePic: [],
      },
      villageId: '',
      villageType: ''
    }
  },
  computed: {
    baseInfoList() {
      console.log(this.villageType, 'this.villageType11111')
      if (this.villageType == 1) { // 纳场村
        return [
          { label: '排水户', prop: 'farmersNum', unit: '户' },
          { label: '管网长度', prop: 'pipLength', unit: 'm' },
          { label: '运维企业', prop: 'enterpriseName' },
          { label: '村庄航拍', prop: 'aerialPhoto' },
        ]
      } else if (this.villageType == 2) { // 自然村
        return [
          { label: '排水户', prop: 'farmersNum', unit: '户' },
          { label: '接入终端', prop: 'terminalNum', unit: '户' },
          { label: '终端名称', prop: 'terminalName' },
          { label: '管网长度', prop: 'pipLength', unit: 'm' },
          { label: '运维企业', prop: 'enterpriseName' },
          { label: '村庄航拍', prop: 'aerialPhoto' },
        ]
      }
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    const { villageName, villageId, attr } = query
    if (villageName) this.villageName = villageName
    if (villageId) {
      console.log(villageId, 'villageId')
      this.villageId = villageId
      this.villageType = attr
      this.getVillageInfo(villageId)
    }
  },
  methods: {
    // 预览图片
    previewPic(pic) {
      uni.previewImage({
        current: pic,
        urls: this.baseInfoData.aerialPhoto.split(',')
      })
    },
    getVillageInfo(villageId) {
      getVillageInfo(villageId).then(({ data }) => {
        console.log(data, '获取村庄信息')
        this.baseInfoData = data.data
      })
    },
    onChange(e) {
      console.log(e, e.detail, this.villageId, 'change')
      this.active = e.detail.name
    },
    goToBack() {
      this.$tab.navigateBack()
    },
  }
}
</script>

<style lang="scss" scoped>
.top-bg {
  letter-spacing: 0 !important;
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }

  .header-wrap {
    .baseContent {
      padding: 32rpx;
    }
    .cardItem {
      background: #fff;
      border-radius: 6rpx;
      color: #000;
      margin: 32rpx;
      .rowItem {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 40rpx;
        margin-bottom: 16rpx;
        .label {
          color: #989898;
        }
        .value {
          color: #5e5e5e;
          .villagePic {
            width: 120rpx;
            height: 120rpx;
            margin-left: 16rpx;
          }
        }
      }
    }
  }

  ::v-deep .van-tabs__scroll {
    background: transparent;
  }
  ::v-deep .van-tab {
    color: #fff;
  }
}
</style>